<template>
  <div class="container">
    <div>
      <el-row>
        <el-col :span="16">
          <div>
            <div style="height: calc(100vh - 320px)">
              <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">案件全流程风险时间轴</div>
                <div style="display: flex;align-items: center;">
                  <img @click="backList1" src="@/assets/返回.png" style="width: 20px;height: 20px;margin-left: 20px;cursor: pointer;" alt="">
                </div>
              </div>
              <div id="echarts" style="width: 100%;height: 100%;"></div>
            </div>
            <div style="padding-left: 10px;padding-top: 20px;">
              <el-timeline>
                <el-timeline-item v-for="(item,index) in leftParentList" :key="index">
                  <div>
                    <div style="display: flex;align-items: center;">
                      <div class="image-container">
                        <img src="@/assets/标签.png" alt="Label" class="label-image">
                        <div class="text-over-image">{{ item.time }}</div>
                      </div>
                      <div style="margin-left: 20px;font-size: 20px;font-weight: bold;">{{ item.process }}阶段</div>
                      <div style="margin-left: 20px;font-size: 20px;font-weight: bold;">总风险值: {{
                          item.totalRisk
                        }}
                      </div>
                    </div>
                    <div style="margin-top: 10px;">
                      <el-table
                          :header-cell-style="tableHeaderColor"
                          :data="item.table"
                          border
                          height="200"
                          style="width: 90%;">
                        <el-table-column
                            prop="title"
                            label="涉风险类型"
                            align="center"
                            min-width="50">
                        </el-table-column>
                        <el-table-column
                            prop="risk"
                            label="风险值"
                            align="center"
                            min-width="30">
                        </el-table-column>
                        <el-table-column
                            prop="reason"
                            label="风险变化原因"
                            align="center"
                            min-width="80">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            min-width="30">
                          <template slot-scope="scope">
                            <div style="color: #409EFF;">风险详情</div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <div style="height: calc(100vh - 300px)">
              <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">案件基本信息</div>
              </div>
              <div style="padding-left: 40px;margin-top: 10px;height: calc(100vh - 400px)">
                <el-table
                    :header-cell-style="tableHeaderColor"
                    :data="tableDataRightTop"
                    border
                    style="width: 90%;">
                  <el-table-column
                      prop="title"
                      label="案号"
                      align="center"
                      min-width="80">
                  </el-table-column>
                  <el-table-column
                      prop="value"
                      :label="case_no"
                      align="center"
                      min-width="100">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="height: calc(100vh - 473px)">
              <div style="display: flex;align-items: center;margin-left: 10px;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">案件基本信息</div>
              </div>
              <div style="padding-left: 40px;margin-top: 5px;">
                <el-table
                    :header-cell-style="tableHeaderColor"
                    :data="tableDataRightBottom"
                    border
                    height="200"
                    style="width: 90%;">
                  <el-table-column
                      align="center"
                      label="当事人">
                    <template slot-scope="scope">
                      <div style="display: flex;justify-content: space-between;">
                        <div>{{ scope.row.title }}</div>
                        <div>{{ scope.row.value }}</div>
                      </div>
                    </template>
                  </el-table-column>

                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import detailData from "@/json/data/detail.json";

export default {
  mounted() {
    const data = JSON.parse(localStorage.getItem("detailKey"))
    this.case_no = data.case_no
    const bottomDataList = data.bottomDataList
    console.log(bottomDataList)
    var detailData = require('@/json/data/detail.json')
    const bookList = detailData.data.filter(v => v.bookId == data.doc_id)
    this.bookList = bookList[0].bookList

    this.bookList.slice(-3).forEach(itemData => {
      const dataItem = {}
      dataItem.time = itemData.date
      dataItem.process = itemData.process
      dataItem.totalRisk = itemData.totalRisk
      dataItem.table = []
      dataItem.table = [{
        title: '重要案件',
        risk: itemData.risk1,
        reason: itemData.reason1
      },
        {
          title: '违规事件',
          risk: itemData.risk2,
          reason: itemData.reason2
        },
        {
          title: '办案节点',
          risk: itemData.risk3,
          reason: itemData.reason3
        }]
      this.leftParentList.push(dataItem)
    })

    bottomDataList.forEach(bottomData => {
      this.tableDataRightBottom.push(
          {
            title: bottomData.position,
            value: bottomData.name
          },
          {
            title: '负责人',
            value: bottomData.representative
          },
          {
            title: '代理人',
            value: bottomData.agent == null ? '' : bottomData.agent.join(",")
          }
      )
    })

    this.tableDataRightTop = [{
      title: '案件审理阶段',
      value: data.procedure
    },
      {
        title: '案件类型',
        value: data.case_category
      },
      {
        title: '立案案由',
        value: data.case_type
      },
      {
        title: '经办法院',
        value: data.first_instance
      },
      {
        title: '争议焦点',
        value: data.dispute_focus
      }]
    this.initCharts()
  },
  computed: {},
  data() {
    return {
      case_no:'',
      leftParentList: [],
      leftData: {
        time: '',
        process: '',
        totalRisk: ''
      },
      bookList: [],
      tableDataRightBottom: [],
      tableDataRightTop: [{
        title: '案件审理阶段',
        value: ''
      },
        {
          title: '案件类型',
          value: ''
        },
        {
          title: '立案案由',
          value: ''
        },
        {
          title: '经办法院',
          value: ''
        },
        {
          title: '争议焦点',
          value: ''
        }]
    }
  },
  methods: {
    backList1(){
      this.$router.back();
    },
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'background:	#f5f8fd; color:#909399;';
    },
    initCharts() {
      const that = this
      const xData = this.bookList.map(item => item.date);
      console.log(xData)

      const categoryMap = this.bookList.reduce((obj, item) => {
        obj[String(item.date)] = item.process;
        return obj;
      }, {});
      console.log(categoryMap)
      var chartDom = document.getElementById('echarts');
      var myChart = echarts.init(chartDom);
      this.myChart = myChart;
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            // params 是一个包含所有系列数据点的数组
            var item = params[0].data.itemData; // 获取第一个系列的数据项
            return `Date: ${item.date}<br/>
              总风险值: ${item.totalRisk}<br/>
              重要案件风险: ${item.risk1}<br/>
              违规事件风险: ${item.risk2}<br/>
              办案节点风险: ${item.risk3}`;
          }
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {
            interval: 0, // 控制标签显示间隔，0表示显示所有标签
            rotate: 0, // 旋转角度
            formatter: function (value, index) {
              // 缩短日期格式
              const shortDate = value.replace(/(\d{4})\/(\d{2})\/(\d{2})/, '$2/$3');
              // 获取当前分类的类型
              const type = categoryMap[value];
              // 如果是当前类型的第一个元素，则显示类型名称，否则不显示
              if (index === 0 || categoryMap[option.xAxis[0].data[index - 1]] !== type) {
                return `{a|${shortDate}}\n{b|${type}}`;
              } else {
                return `{a|${shortDate}}`;
              }
            },
            rich: {
              a: {
                lineHeight: 20
              },
              b: {
                lineHeight: 20
              }
            }
          }
        }],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.bookList.map(item => ({
              value: item.totalRisk,
              itemData: item // 将整个 item 对象存储在 value 对应的对象中
            })),
            type: 'line',
            smooth: true
          }
        ]
      };

      this.option = option;
      myChart.setOption(option);

      myChart.on('click', function (params) {
        // params 包含了点击事件的所有信息
        if (params.componentType === 'series') {
          // 确保点击的是数据系列
          var itemData = params.data.itemData; // 从 series 数据中获取 itemData
          if (itemData) {
            console.log('Clicked item:', itemData)
            that.leftData.time = itemData.date
            that.leftData.process = itemData.process
            that.leftData.totalRisk = itemData.totalRisk

            that.leftParentList = []
            const dataItem = {}
            dataItem.time = itemData.date
            dataItem.process = itemData.process
            dataItem.totalRisk = itemData.totalRisk
            dataItem.table = []
            dataItem.table = [{
              title: '重要案件',
              risk: itemData.risk1,
              reason: itemData.reason1
            },
              {
                title: '违规事件',
                risk: itemData.risk2,
                reason: itemData.reason2
              },
              {
                title: '办案节点',
                risk: itemData.risk3,
                reason: itemData.reason3
              }]
            that.leftParentList.push(dataItem)
          }
        }
      });
    },
  }
};
</script>
<style scoped>

.image-container {
  position: relative; /* 为子元素提供定位上下文 */
  display: inline-block; /* 使容器宽度适应内容 */
}

.label-image {
  width: 140px;
  height: 30px;
}

.text-over-image {
  position: absolute; /* 定位到图片上 */
  top: 0; /* 对齐到顶部 */
  left: 0; /* 对齐到左边 */
  width: 100%; /* 宽度与图片相同 */
  height: 100%; /* 高度与图片相同 */
  display: flex; /* 使用flex布局来居中文字 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: white; /* 文字颜色 */
  font-weight: bold; /* 文字加粗 */
}


.container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
}

</style>